<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common :: index"/>
<style>
  .msg_content{padding: 15px 20px 0px 20px;}
  .msg_content>li{margin-bottom: 8px;}
  .msg_content i{font-size: 10px;color: #FF5722;}
  body .layer-msg .layui-layer-btn{padding-top: 5px;padding-bottom: 10px}
  body .layer-msg .layui-layer-btn a{height: 22px;line-height: 22px}
  /* 浅色菜单 */
  .nav-light.layui-nav-tree>.layui-nav-item>a{
    color: #222 !important;
  }
  .nav-light.layui-nav-tree>.layui-nav-item :hover{
    color: #000 !important;
  }
  .nav-light.layui-nav-tree>.layui-nav-itemed>.layui-nav-child{
    background-color: #ffffff !important;
  }
  .nav-light.layui-nav-tree .layui-nav-child a{
    color: #222 !important;
  }
  .nav-light.layui-nav .layui-nav-mored, .layui-nav-itemed>a .layui-nav-more{
    border-color: transparent transparent #222;
  }
  .nav-light.layui-nav .layui-nav-more{
    border-color: #222 transparent transparent;
  }

</style>
<body class="layui-layout-body">
  
  <div id="LAY_app">
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <!-- 头部区域 -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item layadmin-flexible" lay-unselect>
            <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
              <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
            </a>
          </li>
          <!--<li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="http://www.domor.net/" target="_blank" title="前台">
              <i class="layui-icon layui-icon-website"></i>
            </a>
          </li>-->
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" layadmin-event="refresh" title="刷新">
              <i class="layui-icon layui-icon-refresh-3"></i>
            </a>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
          
          <li class="layui-nav-item" lay-unselect>
            <a lay-href="/system/msg" layadmin-event="message" lay-text="消息中心">
              <i class="layui-icon layui-icon-notice"></i>  
              <!-- 如果有新消息，则显示小圆点 -->
              <span class="layui-badge-dot layui-hide" id="msg_dot"></span>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="theme">
              <i class="layui-icon layui-icon-theme"></i>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="note">
              <i class="layui-icon layui-icon-note"></i>
            </a>
          </li>
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;" layadmin-event="fullscreen">
              <i class="layui-icon layui-icon-screen-full"></i>
            </a>
          </li>
          <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;">
              <cite th:text="${user.userName}"></cite>
            </a>
            <dl class="layui-nav-child">
              <dd><a lay-href="/system/personal">基本资料</a></dd>
              <dd><a lay-href="/system/personal/editPwd">修改密码</a></dd>
              <hr>
              <dd style="text-align: center;"><a href="/logout">退出</a></dd>
            </dl>
          </li>
          
          <li class="layui-nav-item layui-hide-xs" lay-unselect>
            <a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a>
          </li>
          <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
            <a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
          </li>
        </ul>
      </div>
      
      <!-- 侧边菜单 -->
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll">
          <div class="layui-logo" lay-href="home/console.html">
            <span>layuiAdmin</span>
          </div>
          
          <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
            <li data-name="home" class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">
                <i class="layui-icon layui-icon-home"></i>
                <cite>主页</cite>
              </a>
              <dl class="layui-nav-child">
                <dd data-name="console" class="layui-this">
                  <a lay-href="index/console">控制台</a>
                </dd>
                <dd data-name="console">
                  <a lay-href="index/home1">主页一</a>
                </dd>
                <dd data-name="console">
                  <a lay-href="index/home2">主页二</a>
                </dd>
              </dl>
            </li>
            <li th:each="menu : ${menus}" th:attr="data-name=${menu.menuId}" class="layui-nav-item">
              <a href="javascript:;" th:attr="lay-href=${menu.menuType==1}?null:${menu.url}">
                  <i class="layui-icon" th:classappend="${menu.icon}"></i>
                  <cite th:text="${menu.menuName}"></cite>
              </a>
              <dl th:if="${menu.menuType==1}" class="layui-nav-child">
                  <dd th:each="cmenu : ${menu.children}" th:attr="data-name=${cmenu.menuName}">
                      <a th:attr="lay-href=${cmenu.menuType==1}?null:${cmenu.url}" th:text="${cmenu.menuName}"></a>
                      <dl th:if="${cmenu.menuType==1}" class="layui-nav-child">
                        <dd th:each="ccmenu : ${cmenu.children}" th:attr="data-name=${ccmenu.menuName}">
                          <a th:attr="lay-href=${ccmenu.url}" th:text="${ccmenu.menuName}"></a>
                        </dd>
                      </dl>
                  </dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>

      <!-- 页面标签 -->
      <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
          <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
            <li class="layui-nav-item" lay-unselect>
              <a href="javascript:;"></a>
              <dl class="layui-nav-child layui-anim-fadein">
                <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
              </dl>
            </li>
          </ul>
        </div>
        <div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
          <ul class="layui-tab-title" id="LAY_app_tabsheader">
            <li lay-id="index/console" lay-attr="index/console" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
          </ul>
        </div>
      </div>
      
      
      <!-- 主体内容 -->
      <div class="layui-body" id="LAY_app_body">
        <div class="layadmin-tabsbody-item layui-show">
          <iframe src="index/console" frameborder="0" class="layadmin-iframe"></iframe>
        </div>
      </div>
      
      <!-- 辅助元素，一般用于移动设备下遮罩 -->
      <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
  </div>
  <script>

    layui.use(['layer'], function(){
      var layer = layui.layer, $ = layui.$

      // 初始化主题色
      var theme = layui.data('layuiAdmin').theme
      if (theme && theme.color.alias.indexOf("light") > -1) {
        $('.layui-nav-tree').addClass('nav-light');
      }

      var socket;
      openSocket();
      showSelfMsg();

      // webSocket通信
      function openSocket() {
        if(typeof(WebSocket) == "undefined") {
          console.log("您的浏览器不支持WebSocket");
        }else{
          var socketUrl = "[[${url}]]/imserver/[[${user.loginName}]]";
          socketUrl = socketUrl.replace("https","ws").replace("http","ws");
          if(socket!=null){
            socket.close();
            socket=null;
          }
          socket = new WebSocket(socketUrl);
          socket.onopen = () => console.log("websocket已打开")
          socket.onclose = () => console.log("websocket已关闭")
          socket.onerror = () => console.log("websocket发生了错误")
          //获得消息事件
          socket.onmessage = function(msg) {
            if (msg.data == 'connect success') {
              console.log(msg.data);
            } else {
              showMsg($.parseJSON(msg.data));
            }
          };
        }
      }

      // 消息推送提醒
      function showMsg(msg) {
        var content = '<ul class="msg_content">' +
                '<li><i class="layui-icon layui-icon-email"></i>' + msg.content +
                '<a class="title" href="javascript:void(0)" onclick="viewMsg(\''+msg.msgId+'\',\''+msg.msgType+'\',\''+msg.recordId+'\')">[查看]</a>' +
                '</li></ul>'
        openMsg(content, msg.msgId);
        // 显示小圆点
        $('#msg_dot').removeClass('layui-hide');
        // 把消息设置为已发送
        $.post('/system/msg/sentMsgById');
      }

      // 进入主页时获取所有新消息并提醒
      function showSelfMsg() {
        $.post('/system/msg/getSelfMsg',{},function (res) {
          const unSend = res.unSend;
          const unRead = res.unRead;
          if(unRead>0){// 显示小圆点
            $('#msg_dot').removeClass('layui-hide');
          }
          if (common.isNotEmpty(unSend) && unSend.length>0) {
            // 弹出消息窗口
            var content = '<ul class="msg_content">';
            unSend.forEach(msg => {
              content = content + '<li><i class="layui-icon layui-icon-email"></i>' + msg.content +
                      '<a class="title" href="javascript:void(0)" onclick="viewMsg(\''+msg.msgId+'\',\''+msg.msgType+'\',\''+msg.recordId+'\')">[查看]</a>' +
                      '</li>'
            });
            content = content + '</ul>';
            openMsg(content);
            // 把消息设置为已发送
            $.post('/system/msg/sentMsgByReceiver');
          }
        },'json')
      }

      // 弹出消息窗口
      function openMsg(content, msgId) {
        layer.open({
          type: 1
          ,skin: 'layer-msg'
          ,title: '您有新的消息'
          ,maxHeight: 300
          ,anim: 2
          ,offset: 'rb'
          ,time: 1000 * 60 //1分钟后自动关闭
          ,content: content
          ,scrollbar: false
          ,shade: 0 //不显示遮罩
          ,btn: ['确认收到', '查看全部']
          ,yes: function(index, layero){
            // 确认收到后把消息设置成已读
            if (msgId) {
              $.post('/system/msg/read',{ids: msgId}, (res) => {
                if(res.data<=0){
                  $('#msg_dot').addClass('layui-hide');// 隐藏小圆点
                }
              },'json')
            } else {
              $.post('/system/msg/readAll', () => $('#msg_dot').addClass('layui-hide') )
            }
            layer.close(index);
          }
          ,btn2: function(index, layero){
            parent.layui.index.openTabsPage('/system/msg', '消息中心');
          }
        });
      }

    });

    // 查看消息具体内容，并把消息设置为已读
    function viewMsg(msgId,type,recordId) {
      // 把消息设置为已读
      $.post('/system/msg/read',{ids: msgId}, (res) => {
        if(res.data<=0){
          $('#msg_dot').addClass('layui-hide');// 隐藏小圆点
        }
      },'json')
      // TODO 查看消息具体内容,不同类型消息实现不同
      layui.use(['layer'], function(){
        var layer = layui.layer;
        layer.msg(type+":"+recordId)
      })
    }

  </script>

</body>
</html>


